<template>
    <div class="creationPage">
        <div class="filterVue">
            <div style="display: flex">
                <div class="filter">
                    <div style="padding-right: 10px">采购单号</div>
                    <el-input v-model="params.title" placeholder="请输入"
                        style="margin-left: 10px; width: 190px"></el-input>
                </div>
                <div style="display: flex; align-items: center;">
                    <div class="btn1" @click="search">查询</div>
                    <div class="btn1" @click="clearAll">清空</div>
                </div>
            </div>
        </div>
        <div class="tableVue">
            <div class="tableList">
                <div class="thVue">
                    <div class="th">采购单号</div>
                    <div class="th">供应商</div>
                    <div class="th">入库仓库</div>
                    <div class="th">采购总量</div>
                    <div class="th">商品金额</div>
                    <div class="th">创建人</div>
                    <div class="th">创建时间</div>
                    <div class="th">操作</div>
                </div>
                <div class="tdVue">
                    <div class="tdItem" v-for="(item, index) in list" :key="index">
                        <div class="td">{{ item.transferOrderNumber}}</div>
                        <div class="td">{{ item.detail.unitName}}</div>
                        <div class="td">{{ item.transferInRoomWarehouseName }}</div>
                        <div class="td">{{ item.totalNumber }}</div>
                        <div class="td">{{ item.creator }}</div>
                        <div class="td">{{ item.createTime }}</div>
                        <div class="td">详情</div>
                    </div>
                </div>
                <div class="paginationVue">
                    <el-pagination background layout="prev, pager, next" :total="total" :page-size="params.limit"
                        @current-change="pageChange"></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { buyListApi } from "@/api/msg"
export default {
    data() {
        return {
            params: {
                inOrOutOrderNumber: '',
                limit: 15,
                page: 1,
            },
            list: [],
            total: 0,
        };
    },
    created() {
        this.getList();
    },
    methods: {
        search() {
            this.params.page = 1
            this.getList()
        },
        clearAll() {
            this.params = {
                inOrOutOrderNumber: '',
                limit: 15,
                page: 1,
            }
            this.params.page = 1
            this.getList()
        },
        getList() {
            buyListApi(this.params).then(res => {
                console.log(res)
                this.list = res.list
                this.total = res.total
                console.log("采购列表", this.list)
            })
        },

        pageChange(e) {
            console.log(e);
            this.params.page = e;
            this.getList();
        },

    },
};
</script>


<style lang="scss">
.creationPage {
    width: 100%;
    height: calc(100vh - 186px);
    background: #fff;

    .el-dialog__body {
        padding: 0;
        height: 900px;
        max-height: 900px;
        padding: 20px;
    }

    .el-dialog__body::-webkit-scrollbar {
        width: 0;
    }

    .dialogVue {
        width: 100%;
        height: 60vh;
        padding-bottom: 30px;

        .label {
            color: #999;
        }

        .inpVue {
            display: flex;
            align-items: center;

            .groupVue {
                flex: 1;
                height: 440px;
                background: #ececec;

                .img,
                .product {
                    width: 100%;
                    height: 220px;
                    display: flex;
                    justify-content: space-between;
                    flex-direction: column;
                    padding: 20px;

                    .imgVue {
                        flex: 1;
                        height: 120px;
                        overflow-x: scroll;

                        // display: flex;
                        .imgs {
                            width: 118px;
                            height: 118px;
                            margin-right: 20px;
                            display: inline-block;
                            white-space: nowrap;
                        }
                    }

                    // .imgVue::-webkit-scrollbar {
                    //   width: 0;
                    //   height: 0;
                    // }
                }
            }

            .el-input__inner {
                height: 40px !important;
            }

            .avatar-uploader .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;

            }

            .avatar-uploader {
                position: relative;

                .fileBtn {
                    width: 118px;
                    height: 118px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    opacity: 0;
                    cursor: pointer;
                    z-index: 98;
                    border: none;
                    outline: none;
                }
            }

            .avatar-uploader .el-upload:hover {
                border-color: #409eff;
            }

            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 118px;
                height: 118px;
                line-height: 118px;
                text-align: center;
            }

            .avatar {
                width: 118px;
                height: 118px;
                display: block;
            }
        }

        .btnVue {
            display: flex;
            justify-content: flex-end;
            margin-top: 30px;

            .btn {
                width: 66px;
                height: 36px;
                line-height: 36px;
                text-align: center;
                margin-left: 15px;
                cursor: pointer;
            }

            .btn:nth-child(1) {
                color: #333;
                border: 1px solid #f5f5f5;
                border-radius: 4px;
            }

            .btn:nth-child(2) {
                color: #fff;
                background: #0256ff;
                border-radius: 4px;
            }
        }
    }

    .filterVue {
        width: 100%;
        height: 62px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px;

        .filter {
            display: flex;
            align-items: center;
            padding-right: 30px;
        }

        .btn1 {
            width: 60px;
            height: 32px;
            border-radius: 4px;
            line-height: 32px;
            text-align: center;
            background: #2561ef;
            color: #fff;
            margin-right: 10px;
            cursor: pointer;
        }
    }

    .tableVue {
        flex: 1;
        height: calc(100vh - 186px - 62px);

        .thVue {
            width: 100%;
            display: flex;
            height: 70px;
            align-items: center;
            border-bottom: 1px solid #f5f5f5;

            .th {
                flex: 1;
                color: #333333;
                font-weight: 600;
                text-align: center;
            }

            .th:nth-last-child(1) {
                width: 250px;
            }
        }

        .tdVue {
            width: 100%;
            height: calc(100vh - 186px - 62px - 70px - 60px);
            overflow-y: scroll;

            .tdItem {
                width: 100%;
                height: 80px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #f5f5f5;

                .td {
                    flex: 1;
                    text-align: center;
                }

                .td:nth-last-child(1) {
                    width: 250px;
                }
            }
        }

        .tdVue::-webkit-scrollbar {
            width: 0;
        }

        .paginationVue {
            width: 100%;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>